<template>
<div class="market-main">
    <el-card class="card">
        <div slot="header">
        <el-button type="primary" @click="goAddMarket">新增</el-button>
        </div>
        <div>
            <el-table :data="marketList" style="width: 100%">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="name"
                    label="商品名称" sortable>
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="brandName"
                    label="品牌名称" sortable>
                </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="图片" width="120">
                    <template slot-scope="scope"><img :src="scope.row.pic" alt="sorry"></template>
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="price"
                    label="原价"  sortable>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="promotionPrice"
                    label="促销价"  sortable class="promotion-price">
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="createTime"
                    label="开始时间"  sortable>
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="modifyTime"
                    label="结束时间" sortable>
                </el-table-column>
                 <el-table-column header-align="center" align="center" label="操作" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="goEditMarket(scope.row.recommendId)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelMarket(scope.row.recommendId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</div>
</template>

<script>
 import {findAllRecommends,addRecommend} from '@/api/market/index'
export default {
    components: {

    },
    data() {
        return {
            marketList: []

        };
    },
    computed: {

    },
    created() {
        this.init()

    },
    mounted() {

    },
    methods: {
        init(){
            findAllRecommends().then(res=>{
                console.log(res);
                this.marketList=res.data.items
            })
        },
        goAddMarket(){
            this.$router.push({name:'marketListEdit'})
        },
        goEditMarket(id){
            this.$router.push({name:'marketListEdit',query:{id}})
        },
          goDelMarket(id) {
            this.$confirm("此操作将永久删除该营销列, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    delRecommend(id).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.init();
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        } else {
                            this.$message.error("删除失败！！！");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

    },
};
</script>

<style scoped lang="scss">
.card{
    margin: 30px;
}
img{
    width: 120px;
    height: 120px;
}
.promotion-price{
    text-decoration: line-through;
    
}

</style>
